<script setup>
import { useRouter } from 'vue-router';
import StatusBar from '../../components/statusBar.vue';
import { computed, getCurrentInstance, onMounted, ref } from 'vue';
import { showFailToast } from 'vant';
import 'vant/es/toast/style';
import Qrcode from 'qrcode'


//
const { proxy } = getCurrentInstance()

const createInfo = ref({
  companion: [],
  hospitals: [],
  service: {}
})

onMounted(async () => {
  const { data } = await proxy.$api.h5Companion()
  // console.log(data)
  Object.assign(createInfo.value, data.data)
  console.log(createInfo.value)
})

const router = useRouter()
//点击返回
const goBack = () => {
  router.go(-1)
}

//form数据
const form = ref({

})

//就诊医院
const showHospital = ref(false)
const showHospColums = computed(() => {
  return createInfo.value.hospitals.map(item => {
    return { text: item.name, value: item.id }
  })
})

//选择医院
const showHospConfirm = (item) => {
  form.value.hospital_id = item.selectedOptions[0].value
  form.value.hospital_name = item.selectedOptions[0].text
  showHospital.value = false
}

//选择就诊时间
const showStartTime = ref(false)
const currentDate = ref()

//最小日期
const minDate = ref(new Date())
const showTimeConfirm = (item) => {
  // console.log(item)
  const dataStr = item.selectedValues.join('-')
  currentDate.value = dataStr
  form.value.starttime = new Date(dataStr).getTime()
  showStartTime.value = false
}

//选择陪诊师
const showComponion = ref(false)
const componionColumns = computed(() => {
  return createInfo.value.companion.map(item => {
    return { text: item.name, value: item.id }
  })
})
const companionName = ref()
const showComponionConfirm = (item) => {
  form.value.companion_id = item.selectedOptions[0].value
  companionName.value = item.selectedOptions[0].text
  showComponion.value = false
}

//支付弹窗
 const showCode = ref(false)
 const codeImg = ref('')
 const closeCode = () => {
  showCode.value = false
  router.push('/order')
 }
//提交表单
const submit = async() => {
  const params = ['hospital_id','hospital_name','demand','companion_id','receiveAddress','tel','starttime']
  for (const i of params){
    if(!form.value[i]){
      showFailToast('请填写每一项');
      return
    }
  }
 const {data:oderRes} = await proxy.$api.createOrder(form.value)
//  console.log(oderRes)
Qrcode.toDataURL(oderRes.data.wx_code).then(url => {
  showCode.value = true
  codeImg.value = url
})
}
</script>
<template>
  <div class="container">
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" class="header-left" size="30"></van-icon>
      填写服务订单
    </div>
    <StatusBar item="0"></StatusBar>
    <van-cell class="cell">
      <template #title>
        <van-image :src="createInfo.service.serviceImg" width="25" height="25"></van-image>
        <span class="server-name">{{ createInfo.service.serviceName }}</span>
      </template>
      <template #default>
        <div class="service-text">服务内容</div>
      </template>
    </van-cell>
    <van-cell-group class="cell">
      <van-cell>
        <template #title>就诊医院</template>
        <template #default>
          <div @click="showHospital = true">{{ form.hospital_name || '请选择就诊医院' }}
            <van-icon name="arrow"></van-icon>
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title>就诊时间</template>
        <template #default>
          <div @click="showStartTime = true">
            {{ currentDate || '请选择就诊时间' }}
            <van-icon name="arrow"></van-icon>
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title>陪诊师</template>
        <template #default>
          <div @click="showComponion = true">
            {{ companionName || '请选择陪诊师' }}
            <van-icon name="arrow"></van-icon>
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title>接送地址</template>
        <template #default>
          <van-field class="text" input-align="right" v-model="form.receiveAddress" placeholder="请填写接送地址"></van-field>
        </template>
      </van-cell>
      <van-cell>
        <template #title>联系电话</template>
        <template #default>
          <van-field class="text" input-align="right" v-model="form.tel" placeholder="请填写联系电话"></van-field>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="cell" title="服务需求">
      <van-field class="text" style="height: 100px;" v-model="form.demand" placeholder="请简单描述您要就诊的科室"></van-field>
    </van-cell-group>
    <van-button @click="submit" class="sumbit" type="primary" size="large">提交订单</van-button>
    <van-popup v-model:show="showHospital" position="bottom" :style="{ height: '30%' }">
      <van-picker :columns="showHospColums" @confirm="showHospConfirm" @cancel="showHospital = false"></van-picker>
    </van-popup>
    <van-popup v-model:show="showStartTime" position="bottom" :style="{ height: '30%' }">
      <van-date-picker title="选择日期" :min-date="minDate" @confirm="showTimeConfirm"
        @cancel="showStartTime = false"></van-date-picker>
    </van-popup>
    <van-popup v-model:show="showComponion" position="bottom" :style="{ height: '30%' }">
      <van-picker :columns="componionColumns" @confirm="showComponionConfirm"
        @cancel="showComponion = false"></van-picker>
    </van-popup>
    <!-- 支付二维码弹窗 -->
    <van-dialog v-model:show="showCode" :show-confirm-button="false">
      <van-icon name="cross" class="close" @click="closeCode"></van-icon>
      <div>微信支付</div>
      <van-image width="150" height="150" :src="codeImg"></van-image>
      <div >请使用微信扫描二维码</div>
    </van-dialog>
  </div>
</template>
<style scoped lang="less">
.container {
  background-color: #f0f0f0;
  height: 100vh;
}

.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;

  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;

  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }

  ::v-deep(.van-cell__title) {
    display: flex;
    align-items: center;
  }

  .server-name {
    margin-left: 10px;
  }
}

.service-text {
  background: url() no-repeat center center;
  background-size: 20px;
}

.sumbit {
  position: absolute;
  bottom: 0;
}

::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;

  .close {
    position: absolute;
    left: 20px;
  }
}
</style>